<template>
    <div>
        <div class="cover" :style="{ backgroundImage: 'url(' + background + ') center center no-repeat', backgroundSize: 'cover' }">
            <div class="community-bg"
                :style="[{ background: ' url(' + background + ') center center/cover no-repeat ' }, { backgroundSize: 'cover' }]">
            </div>
            <div class="title-container">
                <div class="title_bg"></div>
                <div class="view-info">
                    <div class="vi-con">
                        <h1>{{ blog.title }}</h1>
                    </div>
                </div>
            </div>
        </div>

        <div class="userinfo-container">
            <div class="center">
                <div class="person">
                    <img class="avatar" width="120" height="120" :src="blog.avatar" alt="">

                    <strong class="username">{{ blog.username }}</strong>
                    <div class="vc-time">
                        <span class="time">浏览数：{{ blog.viewCount }}</span>
                        <span class="time">{{ blog.createTime }}</span>
                    </div>
                </div>
            </div>
        </div>
        <!-- 文章详情 -->
        <div class="view">
            <div class="article">
                <!-- <v-md-preview-html :html="blog.content" preview-class="vuepress-markdown-body"></v-md-preview-html> -->
                <v-md-preview :text="blog.content" preview-class="vuepress-markdown-body"></v-md-preview>
                <!-- <p>{{ blog.content }}</p> -->
                <el-divider></el-divider>
            </div>


            <div class="comment-container">
                <div class="com-form">
                    <textarea class="_j_comment_content" placeholder="说点什么吧..." v-model="content"></textarea>
                    <div class="action">
                        <span class="btn" @click="addComment">评论</span>
                    </div>
                </div>
                <div class="com-box">
                    <h2>评论</h2>
                    <div class="com-list">
                        <CommentListItem v-for="item in blogComments" :key="item.id" :comment="item" />
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
 
<script>
import CommentListItem from '@/components/blog/commentListItem'
import { getBlogDetail, getComments, addComment } from '@/api/blog'
import { mapGetters } from 'vuex'

export default {
    name: 'BlogDetail',
    props: [
        'bid'
    ],
    components: {
        CommentListItem
    },
    created() {
        this.form.blogId = this.$route.params.bid
        this.getComments()
    },
    computed: {
        ...mapGetters([
            'refreshComment'
        ])
    },
    watch: {
        '$store.state.blog.refreshComment': {
            handler: function (newVal, oldVal) {
                console.log(newVal, oldVal)
                // console.log('refreshComment发生变化')
                this.getComments()
                this.$forceUpdate()
                this.$store.commit('blog/SET_REFRESH_COMMENT', false)
            },
            // immediate: true
        },
        blogComments : {
            deep: true,
            handler(newVal) {
                // console.log('改变',newVal)
                this.blogComments = newVal
            }
        }

    },
    mounted() {
        console.log(this.$route.params)
        this.getBlogInfo()
    },
    data() {
        return {
            blog: {},
            background: require('@/assets/images/community_bg.jpg'),
            form: {
                pageNum: 1,
                pageSize: 5
            },
            blogComments: [],
            total: '',
            blogComment: {},
            content: '',
            text: '# 标题'
        }
    },
    methods: {
        async getBlogInfo() {
            let res = await getBlogDetail(this.$route.params.bid)
            if (res.code === 200) {
                const { blog } = res.data
                this.blog = blog
                if (this.blog.cover !== '') {
                    this.background = this.blog.cover

                }
                console.log(this.blog)
            } else {
                console.log('查询失败')
            }
        },
        async getComments() {
            console.log(this.form)
            const res = await getComments(this.form)
            console.log(res)
            if (res.code === 200) {
                const { comments, total } = res.data
                this.blogComments = comments
                this.total = total
                console.log(this.blogComments)
            } else {
                console.log('查询失败')
            }
        },
        async addComment() {
            this.blogComment.blogId = this.$route.params.bid
            if (this.content === '') {
                this.$message.error('评论内容不能为空')
                return
            }
            this.blogComment.content = this.content
            this.blogComment.rootId = -1
            const res = await addComment(this.blogComment)
            if (res.code === 200) {
                this.$message.success('评论成功')
                this.content = ''
                this.getComments()

            } else {
                this.$message.error('评论失败')
            }
        }
    }
}
</script>
 
<style lang="less" scoped>
.cover {
    // background: url('@/assets/images/community_bg.jpg') center 0 no-repeat;
    // background:  center 0 no-repeat;
    background-size: cover;
    position: relative;

    .community-bg {
        // background: url('@/assets/images/community_bg.jpg') no-repeat top;
        // background: no-repeat top;
        height: 295px;
        background-size: cover;
        background-color: #efefef;
        background-position: 50%;


    }

    .title-container {
        .title_bg {
            height: 119px;
            background: url('@/assets/images/title_bg.png') 0 bottom repeat-x;
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 1;
            opacity: .5;
        }

        .view-info {
            width: 100%;
            height: 90px;
            position: absolute;
            left: 0;
            bottom: 0;
            z-index: 999;

            .vi-con {
                width: 830px;
                padding: 5px 0 10px 150px;
                margin: 0 auto;
                position: relative;
                z-index: 2;
                color: #fff;
                font-size: 14px;
                font-weight: bold;

                h1 {
                    line-height: 80px;
                    white-space: nowrap;
                    overflow-wrap: normal;
                    width: 710px;
                    height: 80px;
                    font-size: 26px;
                    line-height: 38px;
                    overflow: hidden;
                    color: #fff;
                }
            }
        }
    }

}


.userinfo-container {
    height: 80px;
    border-bottom: 1px solid #d7d7d7;
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.05);
    position: relative;
    z-index: 16;

    .center {
        width: 1000px;
        margin: 0 auto;

        .person {
            width: 1000px;
            padding: 20px 0 0 150px;
            float: left;
            position: relative;

            .avatar {
                width: 120px;
                height: 120px;
                position: absolute;
                top: -81px;
                left: 0;
                z-index: 88;
                border: 0;
                vertical-align: middle;
                border-radius: 50%;
                object-fit: cover;
            }

            .username {
                color: #ff7200;
                font-size: 20px;
                font-weight: normal;
            }

            .vc-time {
                color: #acacac;
                display: inline;
                margin-left: 10px;

                .time {
                    display: inline-block;
                    margin-left: 170px;
                }
            }
        }
    }


}

.view {
    width: 1000px;
    margin: 0 auto;

    .article {
        width: 800px;
        margin-top: 30px;
        border-bottom: #e5e5e5 1px solid;
    }

    .comment-container {
        width: 800px;


        .com-form {
            margin-bottom: 10px;

            textarea {
                height: 55px;
                width: 780px;
                padding: 14px;
                border: 1px solid #e5e5e5;
                resize: none;
                outline: 0;
                border-radius: 5px;
                font-size: 14px;
                color: #666;
                border: 1px solid #ffa200;
            }

            .action {
                display: flex;
                justify-content: flex-end;

                .btn {
                    display: inline-block;
                    width: 98px;
                    height: 28px;
                    background: #ff9d00;
                    border: 1px solid #ff9d00;
                    text-align: center;
                    font-size: 16px;
                    border-radius: 2px;
                    color: #fff;
                    line-height: 28px;
                }
            }
        }

        .com-box {
            margin-top: 25px;
            border-top: 1px solid #e5e5e5;

            .com-list {
                display: flex;
                flex-direction: column;
            }
        }
    }
}
</style>